<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>日期时间 | sksPluginElErp</title>
    <meta name="generator" content="VuePress 1.9.7">
    <link rel="icon" href="https://talk.gitee.com/search/resources/images/logo.svg?20200207">
    <meta name="description" content="Vue 驱动的静态网站生成器">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <meta name="keywords" content="Sks框架,JavaScript,js,ES6,TypeScript,vue,python,css3,html5,Node,git,github,markdown">
    <meta name="themeBak-color" content="#11a8cd">
    
    <link rel="preload" href="/assets/css/0.styles.9ea0c970.css" as="style"><link rel="preload" href="/assets/js/app.321f2bf8.js" as="script"><link rel="preload" href="/assets/js/2.a5e5ef97.js" as="script"><link rel="preload" href="/assets/js/12.dd1b5a6e.js" as="script"><link rel="prefetch" href="/assets/js/10.89292fb0.js"><link rel="prefetch" href="/assets/js/11.1d8a964b.js"><link rel="prefetch" href="/assets/js/13.c006e013.js"><link rel="prefetch" href="/assets/js/14.e09832a5.js"><link rel="prefetch" href="/assets/js/15.d10ea6e3.js"><link rel="prefetch" href="/assets/js/16.20e60327.js"><link rel="prefetch" href="/assets/js/17.56995e59.js"><link rel="prefetch" href="/assets/js/18.433fb3d1.js"><link rel="prefetch" href="/assets/js/3.11e09eaa.js"><link rel="prefetch" href="/assets/js/4.0499b603.js"><link rel="prefetch" href="/assets/js/5.e4a1c443.js"><link rel="prefetch" href="/assets/js/6.6bc77299.js"><link rel="prefetch" href="/assets/js/7.a3f63cd4.js"><link rel="prefetch" href="/assets/js/8.f59d3119.js"><link rel="prefetch" href="/assets/js/9.00518440.js">
    <link rel="stylesheet" href="/assets/css/0.styles.9ea0c970.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><!----> <span class="site-name">sksPluginElErp</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/sksPluginElErp/10.介绍/01.translation.html" class="nav-link">
  elErp扩展
</a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/sksPluginElErp/10.介绍/01.translation.html" class="nav-link">
  elErp扩展
</a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>介绍</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/sksPluginElErp/10.介绍/01.translation.html" class="sidebar-link">translation</a></li><li><a href="/sksPluginElErp/10.介绍/90.常见错误.html" class="sidebar-link">常见错误</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>工具包方法</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/sksPluginElErp/20.工具包方法/01.常用.html" class="sidebar-link">常用</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>封装组件</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/sksPluginElErp/30.封装组件/10.Button按钮.html" class="sidebar-link">Button按钮</a></li><li><a href="/sksPluginElErp/30.封装组件/20.DateTime时间日期选择.html" class="active sidebar-link">DateTime时间日期选择</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/sksPluginElErp/30.封装组件/20.DateTime时间日期选择.html#日期年月日范围选择" class="sidebar-link">日期年月日范围选择</a></li></ul></li><li><a href="/sksPluginElErp/30.封装组件/80.SksSelectSingleByLookupController下拉选择单选.html" class="sidebar-link">SksSelectSingleByLookupController下拉选择单选</a></li><li><a href="/sksPluginElErp/30.封装组件/81.SksSelectMultipleByLookupService下拉选择多选.html" class="sidebar-link">SksSelectMultipleByLookupService下拉选择多选</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>页面处理</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/sksPluginElErp/40.页面处理/10.对话框.html" class="sidebar-link">对话框</a></li><li><a href="/sksPluginElErp/40.页面处理/20.主页列表.html" class="sidebar-link">主页列表</a></li><li><a href="/sksPluginElErp/40.页面处理/21.sksTable列表.html" class="sidebar-link">sksTable列表</a></li><li><a href="/sksPluginElErp/40.页面处理/30.SksTableQueryFormEl列表过滤.html" class="sidebar-link">SksTableQueryFormEl列表过滤</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="日期时间"><a href="#日期时间" class="header-anchor">#</a> 日期时间</h1> <h2 id="日期年月日范围选择"><a href="#日期年月日范围选择" class="header-anchor">#</a> 日期年月日范围选择</h2> <p>开始-结束时间选择</p> <p>校验成功之后需要 需要'重置表单'才能再次校验</p> <div class="demo-block demo-zh-CN demo-20.DateTime%E6%97%B6%E9%97%B4%E6%97%A5%E6%9C%9F%E9%80%89%E6%8B%A9.html" data-v-47d1da0a><div class="demo-content" data-v-47d1da0a><div><div><el-form model="[object Object]" rules="[object Object]"><el-form-item prop="actualStartTime" label="实际时间"><SksDateYmdRange formData="[object Object]" startTimePropName="actualStartTime" endTimePropName="actualEndTime"></SksDateYmdRange></el-form-item> <el-form-item><sksButton type="primary">校验</sksButton> <sksButton type="danger">重置表单</sksButton></el-form-item></el-form></div></div></div> <div class="meta" data-v-47d1da0a><!----> <div class="code-content" data-v-47d1da0a><div class="language-html extra-class" data-v-47d1da0a><pre class="language-html" data-v-47d1da0a><code data-v-47d1da0a>
<span class="token tag" data-v-47d1da0a><span class="token tag" data-v-47d1da0a><span class="token punctuation" data-v-47d1da0a>&lt;</span>template</span><span class="token punctuation" data-v-47d1da0a>&gt;</span></span>
    <span class="token tag" data-v-47d1da0a><span class="token tag" data-v-47d1da0a><span class="token punctuation" data-v-47d1da0a>&lt;</span>div</span><span class="token punctuation" data-v-47d1da0a>&gt;</span></span>
        <span class="token tag" data-v-47d1da0a><span class="token tag" data-v-47d1da0a><span class="token punctuation" data-v-47d1da0a>&lt;</span>el-form</span> <span class="token attr-name" data-v-47d1da0a>ref</span><span class="token attr-value" data-v-47d1da0a><span class="token punctuation attr-equals" data-v-47d1da0a>=</span><span class="token punctuation" data-v-47d1da0a>&quot;</span>form<span class="token punctuation" data-v-47d1da0a>&quot;</span></span> <span class="token attr-name" data-v-47d1da0a>:model</span><span class="token attr-value" data-v-47d1da0a><span class="token punctuation attr-equals" data-v-47d1da0a>=</span><span class="token punctuation" data-v-47d1da0a>&quot;</span>form<span class="token punctuation" data-v-47d1da0a>&quot;</span></span> <span class="token attr-name" data-v-47d1da0a>:rules</span><span class="token attr-value" data-v-47d1da0a><span class="token punctuation attr-equals" data-v-47d1da0a>=</span><span class="token punctuation" data-v-47d1da0a>&quot;</span>rules<span class="token punctuation" data-v-47d1da0a>&quot;</span></span><span class="token punctuation" data-v-47d1da0a>&gt;</span></span>
            <span class="token tag" data-v-47d1da0a><span class="token tag" data-v-47d1da0a><span class="token punctuation" data-v-47d1da0a>&lt;</span>el-form-item</span> <span class="token attr-name" data-v-47d1da0a>prop</span><span class="token attr-value" data-v-47d1da0a><span class="token punctuation attr-equals" data-v-47d1da0a>=</span><span class="token punctuation" data-v-47d1da0a>&quot;</span>actualStartTime<span class="token punctuation" data-v-47d1da0a>&quot;</span></span> <span class="token attr-name" data-v-47d1da0a>label</span><span class="token attr-value" data-v-47d1da0a><span class="token punctuation attr-equals" data-v-47d1da0a>=</span><span class="token punctuation" data-v-47d1da0a>&quot;</span>实际时间<span class="token punctuation" data-v-47d1da0a>&quot;</span></span><span class="token punctuation" data-v-47d1da0a>&gt;</span></span>
                <span class="token tag" data-v-47d1da0a><span class="token tag" data-v-47d1da0a><span class="token punctuation" data-v-47d1da0a>&lt;</span>SksDateYmdRange</span> <span class="token attr-name" data-v-47d1da0a>@clearValidate</span><span class="token attr-value" data-v-47d1da0a><span class="token punctuation attr-equals" data-v-47d1da0a>=</span><span class="token punctuation" data-v-47d1da0a>&quot;</span>clearFormValidate<span class="token punctuation" data-v-47d1da0a>&quot;</span></span>
                                 <span class="token attr-name" data-v-47d1da0a>:formData</span><span class="token attr-value" data-v-47d1da0a><span class="token punctuation attr-equals" data-v-47d1da0a>=</span><span class="token punctuation" data-v-47d1da0a>&quot;</span>form<span class="token punctuation" data-v-47d1da0a>&quot;</span></span>
                                 <span class="token attr-name" data-v-47d1da0a>startTimePropName</span><span class="token attr-value" data-v-47d1da0a><span class="token punctuation attr-equals" data-v-47d1da0a>=</span><span class="token punctuation" data-v-47d1da0a>&quot;</span>actualStartTime<span class="token punctuation" data-v-47d1da0a>&quot;</span></span>
                                 <span class="token attr-name" data-v-47d1da0a>endTimePropName</span><span class="token attr-value" data-v-47d1da0a><span class="token punctuation attr-equals" data-v-47d1da0a>=</span><span class="token punctuation" data-v-47d1da0a>&quot;</span>actualEndTime<span class="token punctuation" data-v-47d1da0a>&quot;</span></span>
                <span class="token punctuation" data-v-47d1da0a>&gt;</span></span>
                <span class="token tag" data-v-47d1da0a><span class="token tag" data-v-47d1da0a><span class="token punctuation" data-v-47d1da0a>&lt;/</span>SksDateYmdRange</span><span class="token punctuation" data-v-47d1da0a>&gt;</span></span>
            <span class="token tag" data-v-47d1da0a><span class="token tag" data-v-47d1da0a><span class="token punctuation" data-v-47d1da0a>&lt;/</span>el-form-item</span><span class="token punctuation" data-v-47d1da0a>&gt;</span></span>
            <span class="token tag" data-v-47d1da0a><span class="token tag" data-v-47d1da0a><span class="token punctuation" data-v-47d1da0a>&lt;</span>el-form-item</span><span class="token punctuation" data-v-47d1da0a>&gt;</span></span>
                <span class="token tag" data-v-47d1da0a><span class="token tag" data-v-47d1da0a><span class="token punctuation" data-v-47d1da0a>&lt;</span>sksButton</span> <span class="token attr-name" data-v-47d1da0a>type</span><span class="token attr-value" data-v-47d1da0a><span class="token punctuation attr-equals" data-v-47d1da0a>=</span><span class="token punctuation" data-v-47d1da0a>&quot;</span>primary<span class="token punctuation" data-v-47d1da0a>&quot;</span></span> <span class="token attr-name" data-v-47d1da0a>@click</span><span class="token attr-value" data-v-47d1da0a><span class="token punctuation attr-equals" data-v-47d1da0a>=</span><span class="token punctuation" data-v-47d1da0a>&quot;</span>submitMainDialog<span class="token punctuation" data-v-47d1da0a>&quot;</span></span><span class="token punctuation" data-v-47d1da0a>&gt;</span></span>校验<span class="token tag" data-v-47d1da0a><span class="token tag" data-v-47d1da0a><span class="token punctuation" data-v-47d1da0a>&lt;/</span>sksButton</span><span class="token punctuation" data-v-47d1da0a>&gt;</span></span>
                <span class="token tag" data-v-47d1da0a><span class="token tag" data-v-47d1da0a><span class="token punctuation" data-v-47d1da0a>&lt;</span>sksButton</span> <span class="token attr-name" data-v-47d1da0a>type</span><span class="token attr-value" data-v-47d1da0a><span class="token punctuation attr-equals" data-v-47d1da0a>=</span><span class="token punctuation" data-v-47d1da0a>&quot;</span>danger<span class="token punctuation" data-v-47d1da0a>&quot;</span></span> <span class="token attr-name" data-v-47d1da0a>@click</span><span class="token attr-value" data-v-47d1da0a><span class="token punctuation attr-equals" data-v-47d1da0a>=</span><span class="token punctuation" data-v-47d1da0a>&quot;</span>resetForm('form')<span class="token punctuation" data-v-47d1da0a>&quot;</span></span><span class="token punctuation" data-v-47d1da0a>&gt;</span></span>重置表单<span class="token tag" data-v-47d1da0a><span class="token tag" data-v-47d1da0a><span class="token punctuation" data-v-47d1da0a>&lt;/</span>sksButton</span><span class="token punctuation" data-v-47d1da0a>&gt;</span></span>
            <span class="token tag" data-v-47d1da0a><span class="token tag" data-v-47d1da0a><span class="token punctuation" data-v-47d1da0a>&lt;/</span>el-form-item</span><span class="token punctuation" data-v-47d1da0a>&gt;</span></span>
        <span class="token tag" data-v-47d1da0a><span class="token tag" data-v-47d1da0a><span class="token punctuation" data-v-47d1da0a>&lt;/</span>el-form</span><span class="token punctuation" data-v-47d1da0a>&gt;</span></span>
    <span class="token tag" data-v-47d1da0a><span class="token tag" data-v-47d1da0a><span class="token punctuation" data-v-47d1da0a>&lt;/</span>div</span><span class="token punctuation" data-v-47d1da0a>&gt;</span></span>
<span class="token tag" data-v-47d1da0a><span class="token tag" data-v-47d1da0a><span class="token punctuation" data-v-47d1da0a>&lt;/</span>template</span><span class="token punctuation" data-v-47d1da0a>&gt;</span></span>
<span class="token tag" data-v-47d1da0a><span class="token tag" data-v-47d1da0a><span class="token punctuation" data-v-47d1da0a>&lt;</span>script</span><span class="token punctuation" data-v-47d1da0a>&gt;</span></span><span class="token script" data-v-47d1da0a><span class="token language-javascript" data-v-47d1da0a>
    <span class="token comment" data-v-47d1da0a>// import {sksDialogFormMixin} from &quot;./dialog-form&quot;;</span>

    <span class="token keyword" data-v-47d1da0a>export</span> <span class="token keyword" data-v-47d1da0a>default</span> <span class="token punctuation" data-v-47d1da0a>{</span>
        <span class="token comment" data-v-47d1da0a>// mixins: [sksDialogFormMixin],</span>
        <span class="token function" data-v-47d1da0a>data</span><span class="token punctuation" data-v-47d1da0a>(</span><span class="token punctuation" data-v-47d1da0a>)</span> <span class="token punctuation" data-v-47d1da0a>{</span>
            <span class="token keyword" data-v-47d1da0a>return</span> <span class="token punctuation" data-v-47d1da0a>{</span>
                <span class="token literal-property property" data-v-47d1da0a>form</span><span class="token operator" data-v-47d1da0a>:</span> <span class="token punctuation" data-v-47d1da0a>{</span>
                    <span class="token literal-property property" data-v-47d1da0a>actualStartTime</span><span class="token operator" data-v-47d1da0a>:</span> <span class="token keyword" data-v-47d1da0a>undefined</span><span class="token punctuation" data-v-47d1da0a>,</span>
                    <span class="token literal-property property" data-v-47d1da0a>actualEndTime</span><span class="token operator" data-v-47d1da0a>:</span> <span class="token keyword" data-v-47d1da0a>undefined</span><span class="token punctuation" data-v-47d1da0a>,</span>
                <span class="token punctuation" data-v-47d1da0a>}</span><span class="token punctuation" data-v-47d1da0a>,</span>
                <span class="token literal-property property" data-v-47d1da0a>rules</span><span class="token operator" data-v-47d1da0a>:</span> <span class="token punctuation" data-v-47d1da0a>{</span>
                    <span class="token literal-property property" data-v-47d1da0a>actualStartTime</span><span class="token operator" data-v-47d1da0a>:</span> <span class="token punctuation" data-v-47d1da0a>[</span>
                        <span class="token punctuation" data-v-47d1da0a>{</span><span class="token literal-property property" data-v-47d1da0a>required</span><span class="token operator" data-v-47d1da0a>:</span> <span class="token boolean" data-v-47d1da0a>true</span><span class="token punctuation" data-v-47d1da0a>,</span> <span class="token literal-property property" data-v-47d1da0a>message</span><span class="token operator" data-v-47d1da0a>:</span> <span class="token string" data-v-47d1da0a>&quot;不能为空&quot;</span><span class="token punctuation" data-v-47d1da0a>,</span> <span class="token literal-property property" data-v-47d1da0a>trigger</span><span class="token operator" data-v-47d1da0a>:</span> <span class="token string" data-v-47d1da0a>&quot;change&quot;</span><span class="token punctuation" data-v-47d1da0a>}</span>
                    <span class="token punctuation" data-v-47d1da0a>]</span><span class="token punctuation" data-v-47d1da0a>,</span>
                <span class="token punctuation" data-v-47d1da0a>}</span>
            <span class="token punctuation" data-v-47d1da0a>}</span>
        <span class="token punctuation" data-v-47d1da0a>}</span><span class="token punctuation" data-v-47d1da0a>,</span>
        <span class="token literal-property property" data-v-47d1da0a>methods</span><span class="token operator" data-v-47d1da0a>:</span> <span class="token punctuation" data-v-47d1da0a>{</span>
            <span class="token function" data-v-47d1da0a>clearFormValidate</span><span class="token punctuation" data-v-47d1da0a>(</span><span class="token parameter" data-v-47d1da0a>propName</span><span class="token punctuation" data-v-47d1da0a>)</span> <span class="token punctuation" data-v-47d1da0a>{</span>
                <span class="token keyword" data-v-47d1da0a>this</span><span class="token punctuation" data-v-47d1da0a>.</span>$refs<span class="token operator" data-v-47d1da0a>?.</span>form<span class="token operator" data-v-47d1da0a>?.</span><span class="token function" data-v-47d1da0a>clearValidate</span><span class="token punctuation" data-v-47d1da0a>(</span>propName<span class="token punctuation" data-v-47d1da0a>)</span>
            <span class="token punctuation" data-v-47d1da0a>}</span><span class="token punctuation" data-v-47d1da0a>,</span>
            <span class="token function" data-v-47d1da0a>submitMainDialog</span><span class="token punctuation" data-v-47d1da0a>(</span><span class="token punctuation" data-v-47d1da0a>)</span> <span class="token punctuation" data-v-47d1da0a>{</span>
                <span class="token keyword" data-v-47d1da0a>this</span><span class="token punctuation" data-v-47d1da0a>.</span>$refs<span class="token operator" data-v-47d1da0a>?.</span>form<span class="token operator" data-v-47d1da0a>?.</span><span class="token function" data-v-47d1da0a>validate</span><span class="token punctuation" data-v-47d1da0a>(</span><span class="token punctuation" data-v-47d1da0a>(</span><span class="token parameter" data-v-47d1da0a>valid</span><span class="token punctuation" data-v-47d1da0a>)</span> <span class="token operator" data-v-47d1da0a>=&gt;</span> <span class="token punctuation" data-v-47d1da0a>{</span>
                <span class="token punctuation" data-v-47d1da0a>}</span><span class="token punctuation" data-v-47d1da0a>)</span>
            <span class="token punctuation" data-v-47d1da0a>}</span><span class="token punctuation" data-v-47d1da0a>,</span>
        <span class="token punctuation" data-v-47d1da0a>}</span>
    <span class="token punctuation" data-v-47d1da0a>}</span>
</span></span><span class="token tag" data-v-47d1da0a><span class="token tag" data-v-47d1da0a><span class="token punctuation" data-v-47d1da0a>&lt;/</span>script</span><span class="token punctuation" data-v-47d1da0a>&gt;</span></span>
</code></pre></div></div></div> <div class="demo-block-control" style="width:unset;" data-v-47d1da0a><i class="caret-bottom icon" data-v-47d1da0a data-v-47d1da0a></i> <span style="display:none;" data-v-47d1da0a data-v-47d1da0a>显示代码</span> <span class="copy-action" style="display:;" data-v-47d1da0a>复制代码</span> <span class="copy-action copy-action-success" style="display:none;" data-v-47d1da0a data-v-47d1da0a>复制代码</span></div></div></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">最后更新时间:</span> <span class="time">2022/8/31 17:28:55</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/sksPluginElErp/30.封装组件/10.Button按钮.html" class="prev">
        Button按钮
      </a></span> <span class="next"><a href="/sksPluginElErp/30.封装组件/80.SksSelectSingleByLookupController下拉选择单选.html">
        SksSelectSingleByLookupController下拉选择单选
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"></div></div>
    <script src="/assets/js/app.321f2bf8.js" defer></script><script src="/assets/js/2.a5e5ef97.js" defer></script><script src="/assets/js/12.dd1b5a6e.js" defer></script>
  </body>
</html>
